<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
<template>
  <!-- 表格 -->
  <!-- 设置表格中的语言配置为中文 -->
  <el-config-provider :locale="zhCn">
    <el-table :data="tableData" row-key="id" border stripe style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column label="编号" prop="id" align="left" />
      <el-table-column label="名称" prop="name" align="center" />
      <el-table-column label="路径" prop="url" :show-overflow-tooltip='true' align="center" />
      <el-table-column label="创建时间" prop="createdate" width="300" align="center">
          <template #default="scope">
                      <span>{{ convertDateTime(scope.row.createdate) }}</span>
                    </template>
      </el-table-column>
    </el-table>
  </el-config-provider>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElTable } from 'element-plus'

const tableData = ref([])


onMounted(() => {
  axios.get('https://localhost:7090/api/JurisdictionManage')
    .then(res => {
      console.log(res.data)
      tableData.value = res.data
      console.log(tableData.value)
    })
})

// function tableRowClassName() {
//   for (let i = 0; i < tableData.value.length; i++) {
//     // var id = tableData.value[i].id;
//     if (i / 2 == 0) {
//       return 'warning-row'
//     } else if (i === 3) {
//       return 'success-row'
//     }
//     return ''
//   }

// }


//转换日期时间
function convertDateTime(dateStr) {
  var datetimeObj = new Date(dateStr);
  var year = datetimeObj.getFullYear();
  var month = ("0" + (datetimeObj.getMonth() + 1)).slice(-2);
  var day = ("0" + datetimeObj.getDate()).slice(-2);
  var hours = ("0" + datetimeObj.getHours()).slice(-2);
  var minutes = ("0" + datetimeObj.getMinutes()).slice(-2);
  var seconds = ("0" + datetimeObj.getSeconds()).slice(-2);
  var formattedDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  return formattedDate;
}

</script>